import React, { Component } from 'react'
import { Card,Button ,Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import List from './PosittyList/'
import FormPage from './PosittyList/FormPage';
import Search from './PosittySearch/Index';
import Property from './PosittyList/PropertyPage';
import uniqid from "uniqid";
interface Props {
    
}
interface State {
    action: string;
    headerName: string;
    todos: object;
}

export default class Index extends Component<Props, State> {
    state = {
        action:'search',
        headerName : '货位类型',
        todos: {},
    }
//编辑货位根据不同状态显示编辑的组件
    handleEditPositty = (editData:any)=>{
        console.log(editData)
        this.setState({
          headerName: `[${editData.code}]${editData.name}`,
          action: "edit",
          todos: editData,
        });
      }
      //查看货位根据不同状态显示货物详情的组件
      handleReadPositty = (readData:any)=>{
        
        this.setState({
          headerName: `[${readData.code}]${readData.name}`,
          action: "read",
          todos: readData,
        });
        console.log(readData)
      }
    /**
     * 新建货位类型
     */
    addPositty = ()=>{
        this.setState({
            headerName : '新建货位类型',
            action:'add',
            todos: {}
        })
    }

    cancelAddPositty = ()=>{
        this.setState({
            headerName : '货位类型',
            action:'search',
        })
    }
    handleSelectPositty = (selectData: any) => {
        console.log(selectData);
        this.setState({
          headerName: `[${selectData.code}]${selectData.name}`,
          action: "select",
          todos: selectData,
        });
      };
    /**
     * 保存货位类型
     */
    savePositty = ()=>{
        alert('保存货位类型')
    }

    render() {
        const { todos, headerName, action } = this.state;
        return (
            <div style={{height:'100%'}}>
                <Card title={this.state.headerName} extra={[
                    <div>
                        {this.state.action==='search' ? 
                            <Space>
                                <Button    key={uniqid()} type="primary" icon={<PlusOutlined/>} onClick={this.addPositty}>
                                    新建
                                </Button>             
                            </Space> :
                            <Space>
                                <Button key={uniqid()} onClick={this.cancelAddPositty} >取消</Button>
                                <Button key={uniqid()} type="primary" onClick={this.savePositty} >确认</Button>
                            </Space>
                        }
                    </div>
                ]} style={{ width: '100%',padding:'24px'}}>
                    {this.state.action==='search' ? 
                        <Space direction="vertical" style={{ width: '100%'}}>
                            <Search/>
                            <List handleEditPositty={this.handleEditPositty.bind(this)}
                            handleSelectPositty={this.handleSelectPositty.bind(this)}
                            />
                        </Space>
                            :(this.state.action==='select'?<Property/>:<FormPage  todos={todos} />)
                         
                    }    
                </Card> 
            </div>
        ) 
    }
}
 